<template>
    <div class="time1">
        <div class="t1">
            <div class="t2">{{ title }}</div>
            <div class="t3">{{ detailTitle }}</div>
        </div>

        <ul  v-infinite-scroll="load" :infinite-scroll-disabled="disabled" class="time2" style="overflow: auto">
            <el-timeline >
                <el-timeline-item :timestamp="s.updateTime" placement="top" v-for="s in timeDataList" v-bind:key="s.time"
                    style="text-align: left;" :color="'#6698ff'">
                    <div class="t4">
                        <el-card style="margin-right: 20px;white-space: nowrap;min-width: min-content;" v-if="s.operatorRole">
                            <p class="t5">{{ s.operatorRole }}</p>
                        </el-card>
                        <el-card style="margin-right: 20px;">
                            <p class="t5" v-html="s.message"></p>
                        </el-card>
                        <el-card v-show="s.isShowImg" style="margin-right: 20px;">
                            <div class="t4">
                                <p class="t5">图片:</p>
                                <div style="position: relative;">
                                    <img class="i1" src="../../assets/images/housePic.png">
                                    <span class="mask">+{{ s.imgCount }}</span>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-timeline-item>
                <el-divider v-if="loading">
                    {{ $t('text.House.l207') }}
                </el-divider>
                <el-divider v-if="disabled">
                    {{ $t('text.House.l48') }}
                </el-divider>
            </el-timeline>
        </ul>
    </div>
</template>
  

  
<script>
export default {
    name: 'HouseTimeLine',
    components: {
    },
    props: {
        title: String,
        detailTitle: String,
        timeDataList: Array
    },
    data() {
        return {
            loading: false,
            disabled: false,
            count: 10
        }
    },
    mounted() {

    },
    methods: {

        load() {
            if (!this.disabled) {
                this.loading = true

                setTimeout(() => {
                    this.count += 2
                    if (this.count > 30) {
                        this.disabled = true
                    }
                    this.loading = false
                }, 1000)

            }
        }

    },
    watch: {

    },
    computed: {

    }

}

</script>


<style scoped>
.time1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

.time2 {
    overflow: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
}

::v-deep(.el-timeline) {
    flex-grow: inherit;
    height: 100px;
}

.t1 {
    display: flex;
    text-align: left;
    flex-direction: column;
    padding-top: 20px;
}

.t2 {
    color: black;
    font-size: 14px;
}

.t3 {
    color: gray;
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.t4 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

::v-deep(.el-card__body) {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 0;
}

.t5 {
    padding-right: 20px;
    word-break: break-all;
}

.i1 {
    width: 35px;
    height: 35px;
}

.mask {
    position: absolute;
    left: 10px;
    top: 10px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin: auto 0;
}
</style>